<ak-header data-display="true">
    <button type="button" class="left_0 w_25 pl_3 text_al_l text_12em" data-href="javascript:history.back();"><i class="text_14em ion ion-ios-arrow-left mr_02em"></i>返回</button>
    <h1 class="text_al_c">布局展示</h1>
</ak-header>

<div class="module list press">
    <ul>
        <li class="bg_white rel ovh"><!--可循环-->
            <dl class="rel h_in ovh list_h_36em wp_94 bor_bottom bor_gray_ddd touchstart" data-href="ajax/page3.html">
                <dt class="fl">列表布局展示</dt>
                <dd class="fr rel mr_4">
                    <span class="fr c_orange ml_05em">状态</span>
                </dd>
                <dd class="abs top_0 right_0 mr_3">
                    <i class="fr ion ion-ios-arrow-right text_16em c_gray_777"></i>
                </dd>
            </dl>
            <dl class="wm_94 ovh pt_1em pb_1em bor_bottom_dashed bor_gray_ddd">
                <dt class="fl rel ovh h_in w_50">
                    <em class="fl mr_03em">姓名：</em>
                    <span class="fl h_in line_h_in c_gray_777">安德鲁</span>
                </dt>
                <dd class="fl rel ovh h_in w_50">
                    <em class="fl mr_03em">性别：</em>
                    <span class="fl h_in line_h_in c_gray_777">男</span>
                </dd>
            </dl>
            <dl class="wm_94 ovh pt_1em pb_1em bor_bottom_dashed bor_gray_ddd">
                <dt class="fl rel ovh h_in mr_03em">邮箱：</dt>
                <dd class="fl rel ovh h_in c_gray_777">andrewkim365@qq.com</dd>
            </dl>
        </li>
    </ul>
</div>

<div class="module list press mt_5">
    <h3 class="wp_94 bg_white line_h_36em text_bold bor_bottom_dashed bor_gray_ddd c_title"><i class="ion ion-information-circled text_al_s text_14em mr_02em"></i> 详情描述展示</h3>
    <p class="wp_94 bg_white pb_3 pt_3 line_h_2em c_gray_777">
        欢迎使用Andrew移动端jQuery插件。当前内容是详情内容的展示。
    </p>
</div>

<div class="module list mt_5 plug_validate">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">表单布局（左对齐）</h3>
    <form action="#" method="get">
        <ul class="wp_94 press bg_white list_h_36em">
            <li class="rel bor_bottom bor_gray_ddd">
                <label class="dis_block rel ovh fl text_ind_2em mr_1em line_h_in">姓名</label>
                <input type="text" class="fl w_75 c_gray_777 plug_Delete" required value="" maxlength="6" placeholder="请输入真实姓名" />
            </li>
            <li class="rel bor_bottom bor_gray_ddd">
                <label class="dis_block rel ovh fl mr_1em line_h_in">手机号码</label>
                <input type="tel" class="fl w_75 c_gray_777 plug_Delete" required value="" maxlength="11" placeholder="请输入手机号码" pattern="[0-9]*" />
            </li>
            <li class="rel bor_bottom bor_gray_ddd">
                <label class="dis_block rel ovh fl pl_2em mr_1em line_h_in">性别</label>
                <span class="fl c_gray_777">男</span>
            </li>
        </ul>
    </form>
</div>

<div class="module press mt_5 bg_white">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">表格样式</h3>
    <section class="wm_94 pt_3 pb_3 ovh rel">
        <table class="bor_top bor_bottom bor_gray_ddd">
            <thead class="c_title text_al_c list_h_3em bor_top2 bor_title">
            <tr>
                <th class="text_bold">标题A</th>
                <th class="text_bold">标题B</th>
                <th class="text_bold">标题C</th>
                <th class="text_bold">标题D</th>
            </tr>
            </thead>
            <tbody class="c_gray_777 text_al_c list_h_36em list_f9f bor_top bor_gray_ddd">
            <tr class="bor_bottom bor_gray_ddd">
                <td>内容1-1</td>
                <td>内容1-2</td>
                <td>内容1-3</td>
                <td>内容1-4</td>
            </tr>
            <tr class="bor_bottom bor_gray_ddd">
                <td>内容2-1</td>
                <td>内容2-2</td>
                <td>内容2-3</td>
                <td>内容2-4</td>
            </tr>
            <tr class="bor_bottom bor_gray_ddd">
                <td>内容3-1</td>
                <td>内容3-2</td>
                <td>内容3-3</td>
                <td>内容3-4</td>
            </tr>
            <tr class="bor_bottom bor_gray_ddd">
                <td>内容4-1</td>
                <td>内容4-2</td>
                <td>内容4-3</td>
                <td>内容4-4</td>
            </tr>
            </tbody>
        </table>
    </section>
</div>

<div class="module list mt_5 ovh rel">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">图片列表展示</h3>
    <ul>
        <li class="rel ovh bg_white pa_3 bor_bottom bor_gray_ddd touchstart" data-href="ajax/page3.html">
            <figure class="fl bg_gray_f5f border bor_gray_ddd wh_6em img_auto">
                <img src="./img/tibet-1.jpg">
            </figure>
            <div class="fl list_h_18em ml_1em ovh w_65">
                <h3 class="text_12em">产品名称</h3>
                <p class="c_gray_777">
                    <del class="text_al_t">价格</del>
                </p>
                <p class="c_gray_999 text_hidden">该产品的简介和描述</p>
            </div>
        </li>
        <li class="rel ovh bg_white pa_3 bor_bottom bor_gray_ddd touchstart" data-href="ajax/page3.html">
            <figure class="fl bg_gray_f5f border bor_gray_ddd wh_6em img_auto">
                <img src="./img/tibet-2.jpg">
            </figure>
            <div class="fl list_h_18em ml_1em ovh w_65">
                <h3 class="text_12em">产品名称</h3>
                <p class="c_gray_777">
                    <del class="text_al_t">价格</del>
                </p>
                <p class="c_gray_999 text_hidden">该产品的简介和描述该产品的简介和描述该产品的简介和描述</p>
            </div>
        </li>
    </ul>
</div>

<div class="module press mt_5 bg_white">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">功能布局</h3>
    <ul class="ovh list_h_8em verline_list length3">
        <li class="fl rel text_al_c touchstart">
            <button type="button" class="dis_block ovh w_100" data-href="ajax/page3.html">
                <label class="bg_title bor_rad_50 c_white wh_4em mt_05em center">
                    <i class="text_al_c text_al_t line_h_18em text_24em ion ion-social-apple"></i>
                </label>
                <span class="dis_block text_al_c line_h_2em">Apple</span>
            </button>
        </li>
        <li class="fl rel text_al_c touchstart">
            <button type="button" class="dis_block ovh w_100" data-href="ajax/page3.html">
                <label class="bg_title bor_rad_50 c_white wh_4em mt_05em center">
                    <i class="text_al_c text_al_t line_h_18em text_24em ion ion-social-android"></i>
                </label>
                <span class="dis_block text_al_c line_h_2em">Android</span>
            </button>
        </li>
        <li class="fl rel text_al_c touchstart">
            <button type="button" class="dis_block ovh w_100" data-href="ajax/page3.html">
                <label class="bg_title bor_rad_50 c_white wh_4em mt_05em center">
                    <i class="text_al_c text_al_t line_h_18em text_24em ion ion-social-windows"></i>
                </label>
                <span class="dis_block text_al_c line_h_2em">Windows</span>
            </button>
        </li>
    </ul>
</div>

<div class="module press mt_5 mb_5 bg_white">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">视频展示</h3>
    <ul class="ml_3 mt_1em length2">
        <li class="fl h_7em mb_1em">
            <figure class="w_94 border bor_gray_ddd img_auto">
                <video controls="controls" preload="auto" poster="./img/tibet-1.jpg">
                    <source src="./media/movie.mp4" type="video/mp4" />
                </video>
            </figure>
        </li>
        <li class="fl h_7em mb_1em">
            <figure class="w_94 border bor_gray_ddd img_auto">
                <video controls="controls" preload="auto" poster="./img/tibet-2.jpg">
                    <source src="./media/movie.mp4" type="video/mp4" />
                </video>
            </figure>
        </li>
    </ul>
</div>

<ak-footer data-display="true">
</ak-footer>

<script type="text/javascript">
    //引入Andrew插件的区域

</script>